<template>
    <el-dialog :model-value="isShow" title="添加退货原因" @close="emit('hide')">
        <el-form :model="form">
            <el-form-item label="原因类型：" label-width="120px">
                <el-input v-model="form.name" autocomplete="off" />
            </el-form-item>
            <el-form-item label="排序：" label-width="120px">
                <el-input v-model="form.sort" autocomplete="off" />
            </el-form-item>
            <el-form-item label="是否启用" label-width="120px">
                <el-switch v-model="form.status" :active-value="1" :inactive-value="0" />
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="emit('hide')">取消</el-button>
                <el-button type="primary" @click="ConfirmFn">
                    确定
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script setup lang='ts'>
import { ElMessage, ElMessageBox, FormInstance } from 'element-plus';
import { reactive, ref, watch } from 'vue';
import { getReturnReasonIdApi, getUpdateCreateApi, getUpdateIdApi } from "../api/index"

const props = defineProps({
    isShow: {
        type: Boolean,
        default: false
    },
    id: {
        type: Number,
        default: 0
    }
})

const formRef = ref<FormInstance>();

watch(() => props.id, () => {
    if (props.id !== 0) {
        getReturnReasonIdApi(props.id).then(res => {
            if (res.code === 200) {
                Object.assign(form, res.data)
            }
        })
    } else if (props.id == 0) {
        // 清空表单
        form.name = ''
        form.sort = 0
        form.status = 1
    }

})

const emit = defineEmits(['hide'])

let form = reactive<CustomCreateType>({
    name: '',
    sort: 0,
    status: 1,
})


const ConfirmFn = () => {
    if (props.id !== 0) {
        ElMessageBox.confirm("是否要进行修改操作?", "提示?", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: 'warning',
        }).then(() => {
            getUpdateIdApi(form).then(res => {
                if (res.code === 200) {
                    ElMessage.success('修改成功')
                    emit('hide', true)
                }
            })
        })
    } else {
        getUpdateCreateApi(form).then(res => {
            if (res.code === 200) {
                ElMessage.success('添加成功')
                emit('hide', true)
            }
        })
    }
}

</script>

<style>

</style>
